<template>
  <div>
    <slot></slot>
    <el-dialog
      :visible.sync="dialog"
      :title="$t('setting.订单同步')"
      width="950px"
    >
      <div class="form-item">
        <div class="label">{{ $t('setting.订单同步') }}</div>
        <div class="item">
          <el-radio-group v-model="currentForm.orderHiddenType">
            <el-radio :label="1">{{ $t('setting.全部SKU') }}</el-radio>
            <el-radio :label="2">{{ $t('setting.部分SKU') }}</el-radio>
          </el-radio-group>
          <div class="tips font-grey">
            {{$t('setting.针对特殊客户可设置只同步部分选定需发货SKU的订单到系统，减少漏发多发风险')}}
          </div>
        </div>
      </div>

      <div class="table mgt10" v-show="currentForm.orderHiddenType === 2">
        <div class="table-header">
          <div class="left">
            <div v-html="$t('setting.当前已选择SKU数量num',{num: this.currentForm.currentSuitIds.length})">
            </div>
          </div>
          <div class="right">
            <el-input
              size="small"
              style="width: 200px;"
              v-model="queryParams.keyword"
              :placeholder="$t('common.searchForCompleteListingIDorSKU')"
              @keyup.enter.native="changeOption()"
            ></el-input>
            <el-button type="primary" @click="changeOption">{{ $t('common.search') }}</el-button>
          </div>
        </div>
        <el-table
          :data="tableData"
          v-loading="loading"
          border
          @sort-change="handleSortChange"
          :default-sort="{prop: 'stockNum', order: 'descending'}"
        >
          <el-table-column
            prop="selected"
            label=""
            width="35"
          >
            <template v-slot="{row}">
              <el-checkbox :value="currentForm.currentSuitIds.indexOf(row.id) !== -1" @change="selectedRow(row)"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsImage"
            :label="$t('table.productCover')"
            align="center"
            width="110"
          >
            <template slot-scope="{row}">
              <div class="img-box img-one">
                <img :src="row.image" alt="">
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="title"
            :label="$t('table.title')"
            align="left"
            min-width="150"
          >
            <template slot-scope="{row}">
              <el-tooltip placement="top" :content="row.title">
                <div class="title hidden-2">
                  {{ row.title }}
                </div>
              </el-tooltip>

              <div class="goods-attr">
                <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                  style="color: #7F7F7F;"
                >
                {{attr.name}} : {{attr.value}}
                <span class="attr-link"> | </span>
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsList"
            :label="$t('table.ListingIDAndSKU')"
            align="center"
            min-width="200"
          >
            <template v-slot="{row}">
              <div
                v-for="goods in row.goodsList"
                :key="goods.id"
              >
                {{goods.goodsId}} {{goods.sku ? `(${goods.sku})` : ''}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="stockNum"
            min-width="150"
            align="center"
            sortable="custom"
          >
            <template #header>
              <span>{{$t('table.一件代发库存')}}</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>{{ $t('stock.仓库已确认入库的一件代发库存，代贴单后扣减的该库存数量') }}</template>
                <i class="el-icon-question" style="color:#409eff; margin-left:5px;"></i>
              </el-tooltip>
            </template>
            <template v-slot="{row}">
              {{ row.totalStockNum }}
            </template>
          </el-table-column>

        </el-table>
        <el-pagination
          background
          layout="total  , prev, pager, next, jumper"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          @current-change="getData"
        >
        </el-pagination>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="submitForm">{{ $t('common.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getStockGoodsList} from "@/api/stock";
import {deepCopy} from "@/utils";
import {saveUserOrderHidden} from "@/api/user";

export default {
  name: "OrderHidden",
  props: {
    userId: {
      required: true,
      type: Number,
    },
    selectSuitIds: {
      required: true,
      type: Array,
    },
    orderHiddenType: {
      required: true,
      type: Number,
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.$on('showDialog',()=>{
        this.showDialog()
      })
    })
  },
  data(){
    return {
      dialog: false,
      loading: false,
      submitLoading: false,
      tableData: [], // 当前表单数据
      queryParams: {
        userIds: [],
        page: 1,
        pageSize: 10,
        keyword: '',
        orderBy: 'descending',
        orderField: 'stockNum',
      },
      total: 0,
      currentForm: {
        userId: 0,
        orderHiddenType: 1, // 1全部SKU 2部分SKU
        currentSuitIds: [], // 当前的suitIds
      }
    }
  },
  methods: {
    showDialog(){
      this.dialog = true
      this.queryParams.userIds = [this.userId]
      this.currentForm.userId = this.userId
      this.currentForm.orderHiddenType = this.orderHiddenType
      this.currentForm.currentSuitIds = deepCopy(this.selectSuitIds)
      this.getData()
    },
    getData(){
      this.loading = true
      getStockGoodsList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.tableData = deepCopy(res.data)
          this.total = res.info.total
        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData()
    },
    selectedRow(row){
      const index = this.currentForm.currentSuitIds.indexOf(row.id)
      if(index === -1){
        this.currentForm.currentSuitIds.push(row.id)
      }else{
        this.currentForm.currentSuitIds.splice(index, 1);
      }
    },
    // 保存保单
    submitForm(){
      this.submitLoading = true
      saveUserOrderHidden(this.currentForm)
        .then(res=>{
          this.submitLoading = false
          if(res.error === 0){
            this.$successMessage(res.message)
            this.$emit('changeOrderHidden',this.currentForm)
            this.dialog = false
          }else{
            this.$errorMessage(res.message)
          }
        })
    },
    handleSortChange(column){
      this.queryParams.orderBy = '';
      this.queryParams.orderField = '';
      if(column.order){
        this.queryParams.orderBy = column.order;
        this.queryParams.orderField = column.prop
      }
      this.changeOption()
    },

  },

}
</script>

<style scoped lang="scss">
.form-item{
  display: flex;
  .label{
    width: 80px;
    font-weight: bold;
  }
  .tips{
    margin-top: 10px;
    font-size: 13px;
  }
}
.table{
  .table-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
    .left{
      line-height: 32.5px;
    }
  }

}
</style>
